<!--
 * hi-countdown - 倒计时
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <hi-countdown :date="endDate"></hi-countdown>
        </module-demo>

        <!-- 显示完整倒计时 -->
        <module-demo title="显示完整倒计时">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="100"></hi-countdown>
        </module-demo>

        <!-- 不补零 -->
        <module-demo title="不补零">
            <hi-countdown :date="endDate" format="{W}周{D}天{H}时{M}分{S}秒{MS}" interval="100"></hi-countdown>
        </module-demo>

        <!-- 结束提示 -->
        <module-demo title="结束提示">
            <hi-countdown :date="new Date()"></hi-countdown>
            <hi-countdown :date="new Date()" tips="活动已结束"></hi-countdown>
        </module-demo>

        <!-- 边框 -->
        <module-demo title="边框">
            <hi-countdown :date="endDate" border></hi-countdown>
        </module-demo>

        <!-- 主题 -->
        <module-demo title="主题">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" theme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" theme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" theme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" theme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" theme="info"></hi-countdown>
        </module-demo>

        <!-- 镂空 -->
        <module-demo title="镂空">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" plain theme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" plain theme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" plain theme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" plain theme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" plain theme="info"></hi-countdown>
        </module-demo>

        <!-- 浅化 -->
        <module-demo title="浅化">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" tint theme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" tint theme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" tint theme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" tint theme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" tint theme="info"></hi-countdown>
        </module-demo>

        <!-- 边框+主题+浅化 -->
        <module-demo title="边框+主题+浅化">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" border tint theme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" border tint theme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" border tint theme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" border tint theme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" border tint theme="info"></hi-countdown>
        </module-demo>

        <!-- 数字边框 -->
        <module-demo title="数字边框">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder></hi-countdown>
        </module-demo>

        <!-- 数字主题 -->
        <module-demo title="数字主题">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTheme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTheme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTheme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTheme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTheme="info"></hi-countdown>
        </module-demo>

        <!-- 数字镂空 -->
        <module-demo title="数字镂空">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numPlain numTheme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numPlain numTheme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numPlain numTheme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numPlain numTheme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numPlain numTheme="info"></hi-countdown>
        </module-demo>

        <!-- 数字浅化 -->
        <module-demo title="数字浅化">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTint numTheme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTint numTheme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTint numTheme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTint numTheme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numTint numTheme="info"></hi-countdown>
        </module-demo>

        <!-- 数字边框+主题+浅化 -->
        <module-demo title="数字边框+主题+浅化">
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder numTint numTheme="primary"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder numTint numTheme="success"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder numTint numTheme="warning"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder numTint numTheme="error"></hi-countdown>
            <hi-countdown :date="endDate" format="{WW}周{DD}天{HH}时{MM}分{SS}秒{MSS}毫秒" interval="200" numBorder numTint numTheme="info"></hi-countdown>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 结束日期
    const date = new Date();
    date.setDate(date.getDate() + 30);
    const endDate = ref(date);

    // 自定义分隔符
    const separator = ref({
        days: "日",
        hours: "小时",
        minutes: "分钟",
        seconds: "秒"
    });
</script>

<style lang="scss" scoped></style>
